<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/vant/index.css">
    <link rel="stylesheet" href="static/element/index.css">
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>Title</title>

    <style>
        .fail .layui-layer-content {
            background-color: brown;
            color: #eee;
            width: 400px;
            height: 60px;
            text-align: center;
        }

        .succeed .layui-layer-content {
            background-color: #0061A8;
            color: #eee;
            width: 400px;
            height: 60px;
            text-align: center;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 138px;
            height: 180px;
            line-height: 180px;
            text-align: center;
        }

        .avatar {
            width: 138px;
            height: 180px;
            display: block;
        }

        .el-select-group__title {
            font-size: 20px;
            color: #eee;
        }

        .el-select-dropdown__wrap {
            max-height: 523px !important;
        }
    </style>
</head>
<body>
<article class="page-container" id="app">

    <table style="table-layout:fixed; width: 100%; word-break:break-all;" class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="tablelist">
        <tbody id="datalist">
        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">组织名称</td>
            <td style="font-size: 0.8rem;">
                <%--                <input type="text" class="input-text" style="border:0;" v-model="ryzh" autocomplete="off" readonly="readonly">--%>
                <input type="text" class="input-text" style="border:0;" v-model="zzmc" autocomplete="off" readonly="readonly">
            </td>
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">人员姓名</td>
            <td style="font-size: 0.8rem;">
                <input type="text" class="input-text" style="border:0;" v-model="ryxm" autocomplete="off">
            </td>
        </tr>

        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">部门</td>
            <td style="font-size: 0.8rem;">
                <el-select v-model="bmvalue" placeholder="请选择" size="medium" style="width: 100%; border: 0">
                    <el-option-group v-for="group in options"
                                     :key="group.label"
                                     :label="group.label" style="background-color:#00a0e9;font-size: 18px; color: #eee">
                        <el-option
                                v-for="item in group.options"
                                :key="item.bmvalue"
                                :label="item.bmlabel"
                                :value="item.bmvalue" style="background-color: #fff">
                        </el-option>
                    </el-option-group>
                </el-select>
            </td>

            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">人员类别</td>
            <td style="font-size: 0.8rem;">
                <el-select v-model="rylb" placeholder="请选择">
                    <el-option
                            v-for="item in tableRylb"
                            :key="item.VALUE01"
                            :label="item.VALUE02"
                            :value="item.VALUE01">
                    </el-option>
                </el-select>
            </td>
        </tr>
        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">工号</td>
            <td style="font-size: 0.8rem;">
                <input type="text" class="input-text" v-model="gh" style="border:0;" autocomplete="off">
            </td>
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">消费类别</td>
            <td style="font-size: 0.8rem;">
                <el-select v-model="xflb" placeholder="请选择">
                    <el-option
                            v-for="item in tableXflb"
                            :key="item.VALUE01"
                            :label="item.VALUE02"
                            :value="item.VALUE01">
                    </el-option>
                </el-select>
            </td>
        </tr>
        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">身份证号</td>
            <td style="font-size: 0.8rem;">
                <label>
                    <input type="text" v-model="sfzh" class="input-text" style="border:0;">
                </label>
            </td>
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">电话号码</td>
            <td style="font-size: 0.8rem;">
                <label>
                    <input type="text" v-model="dhhm" class="input-text" style="border:0;">
                </label>
            </td>
        </tr>
        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">性别</td>
            <td style="font-size: 0.8rem;">
                <div style="text-align: left">
                    <el-radio v-model="hysex" label="男">男</el-radio>
                    <el-radio v-model="hysex" label="女">女</el-radio>
                </div>
            </td>
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">上传门禁系统</td>
            <td style="font-size: 0.8rem;">
                <div style="text-align: left">
                    <el-radio v-model="ismen" label="是">是</el-radio>
                    <el-radio v-model="ismen" label="否">否</el-radio>
                </div>
            </td>
        </tr>

        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">照片</td>
            <td style="font-size: 0.8rem;">
                <el-upload
                        class="avatar-uploader"
                        action=""
                        :before-upload="handBefore"
                        :on-preview="handPreview"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="base64" :src="base64" class="avatar" alt="">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </td>
            <td colspan="2">
                <table>
                    <tbody>
                    <tr>
                        <td style="color:brown; text-align: left; border: 0">注：点击照片可以进行照片更新及添加。</td>
                    </tr>
                    <tr>
                        <td style="color:brown; text-align: left; border: 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;照片格式为jpg格式；大小：50k -- 220k 之间.</td>
                    </tr>
                    <tr>
                        <td style="color:brown; text-align: left; border: 0">同步海康是保存之后的信息，修改但未保存的信息不进行同步.</td>
                    </tr>
                    <tr>
                        <td style="color:brown; text-align: left; border: 0"></td>
                    </tr>
                    <tr>
                        <td style="color:brown; text-align: left; border: 0">
                            <van-button type="warning" @click="fSend()" style="width: 150px; margin-left: 20px;">同步海康</van-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
    <van-row style="margin-top: 25px;">
        <van-col span="6"></van-col>
        <van-col span="6"></van-col>
        <van-col span="6">
            <div style="text-align: right">
                <van-button type="primary" @click="fDo()" style="width: 80%" v-loading.fullscreen.lock="fullscreenLoading">提交</van-button>
            </div>
        </van-col>
        <van-col span="6">
            <div style="text-align: right">
                <van-button type="info" @click="fExit()" style="width: 80%">返回</van-button>
            </div>
        </van-col>
    </van-row>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="static/axios.min.js"></script>
<script type="text/javascript" src="./static/vue"></script>
<script src="static/vant/vant.min.js"></script>
<script src="static/element/index.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#app',
        data: {
            flag: false,
            ryzh: '',
            rykh: '',
            ryxm: '',
            options: [],
            bmvalue: '',
            tableRylb: [],
            rylb: '',
            personid: '',
            bmUUID:'',
            gh: '',
            tableXflb: [],
            xflb: '',
            sfzh: '',
            dhhm: '',
            hysex: '男',
            ismen: '是',
            base64: '',
            upbase64: '',
            lock: false,
            zzmc: '',
            picOk: false,
            faceid:'',
            fullscreenLoading: false
        },
        methods: {
            handBefore(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 > 0.22;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return
                }
                if (file.size / 1024 / 1024 < 0.05) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">图片太小，不合要求!</span>', {time: 1500, skin: 'fail'});
                    return
                }
                if (isLt2M) {
                    // this.$message.error('上传头像图片大小不能超过 500K!');
                    layer.msg('<span style="font-size:26px; line-height: 30px">图片太大，不符合要求!</span>', {time: 1500, skin: 'fail'});
                    return
                }
                this.picOk = true

                let reader = new FileReader();
                let self = this
                //--绑定load事件
                reader.onload = function (e) {
                    self.upbase64 = e.target.result
                }
                //--读取File对象的数据
                reader.readAsDataURL(file);
            },

            handPreview(file) {
            },

            handleAvatarSuccess(res, file) {
                this.base64 = URL.createObjectURL(file.raw);
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 > 0.22;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 220K!');
                }
                return isJPG && isLt2M;
            },

            isCardNo(idcode) {
                // 加权因子
                var weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
                // 校验码
                var check_code = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];

                var code = idcode + "";
                var last = idcode[17];//最后一个

                var seventeen = code.substring(0, 17);

                // ISO 7064:1983.MOD 11-2
                // 判断最后一位校验码是否正确
                var arr = seventeen.split("");
                var len = arr.length;
                var num = 0;
                for (var i = 0; i < len; i++) {
                    num = num + arr[i] * weight_factor[i];
                }

                // 获取余数
                var resisue = num % 11;
                var last_no = check_code[resisue];

                // 格式的正则
                // 正则思路
                /*
                    第一位不可能是0
                    第二位到第六位可以是0-9
                    第七位到第十位是年份，所以七八位为19或者20
                    十一位和十二位是月份，这两位是01-12之间的数值
                    十三位和十四位是日期，是从01-31之间的数值
                    十五，十六，十七都是数字0-9
                    十八位可能是数字0-9，也可能是X
                */
                var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;

                // 判断格式是否正确
                var format = idcard_patter.test(idcode);

                // 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
                return last === last_no && format ? true : false;
            },

            fDo() {
                if (this.ryxm.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请输入人员姓名！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (this.bmvalue.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请选择部门！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (this.rylb.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请选择人员类别！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (this.xflb.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请选择消费类别！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (this.gh.length === 0) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请输入工号！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (this.dhhm.length !== 11) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">请确定电话长度为11位！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (!this.isCardNo(this.sfzh)) {
                    layer.msg('<span style="font-size:26px; line-height: 30px">输入的身份证不合法！</span>', {time: 2000, skin: 'fail'});
                    return
                }

                if (!this.lock) {
                    this.fullscreenLoading = true
                    this.lock = true
                    let tmpBase64 = this.upbase64.replace(/^data:image\/\w+;base64,/, "");//去掉base64位头部
                    let ls_opid = "${sessionOpid}";
                    let self = this
                    let params = new URLSearchParams();
                    params.append('CMD', "ZP");
                    params.append('VALUE01', this.ryzh);        //--帐号
                    params.append('VALUE02', this.ryxm);        //--人员姓名
                    params.append('VALUE03', this.gh);          //--工号
                    params.append('VALUE04', this.rylb);        //--人员类别
                    params.append('VALUE05', this.bmvalue);     //--部门编号
                    params.append('VALUE06', tmpBase64);     //--头像数据
                    params.append('VALUE07', this.xflb);     //--消费类别
                    params.append('VALUE08', this.sfzh);     //--身份证号
                    params.append('VALUE09', this.dhhm);     //--电话号码
                    params.append('VALUE10', this.hysex);     //--人员性别
                    params.append('VALUE11', this.ismen);     //--是否上传门禁
                    params.append('VALUE12', ls_opid);

                    axios.post('/f_wscl/com2', params)
                        .then(function (res) {
                            let {db1} = res.data
                            if (db1[0].VALUE01 === 'ZZ01') {
                                layer.msg('<span style="font-size:26px; line-height: 30px">' + db1[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                            } else if (db1[0].VALUE01 === 'ZZ00') {
                                layer.msg('<span style="font-size:26px; line-height: 30px">人员维护操作完毕!</span>', {time: 2000, skin: 'succeed'}, function () {
                                    let index = parent.layer.getFrameIndex(window.name);
                                    parent.fGetinfoEmp();
                                    parent.layer.close(index);
                                });
                            }
                        })
                        .catch(function (error) {
                            layer.msg('<span style="font-size:26px; line-height: 30px">网络异常错误!</span>', {time: 1500, skin: 'fail'});
                        }).finally(function () {
                        self.lock = false
                        self.fullscreenLoading = false
                    });
                }
            },

            fSend() {
                let self = this;
                let params = new URLSearchParams();
                params.append('personId', this.personid);
                params.append('personName', this.ryxm);
                if (this.hysex === '男') {
                    params.append('gender', "1");
                } else if (this.hysex === '女') {
                    params.append('gender', "2");
                }
                params.append('orgIndexCode', this.bmUUID);
                params.append('phoneNo', this.dhhm);
                params.append('certificateNo', this.sfzh);
                params.append('jobNo', this.gh);
                let tmpBase64 = this.base64.replace(/^data:image\/\w+;base64,/, "");//去掉base64位头部
                params.append('faceData', tmpBase64);
                params.append('cardno', this.rykh);
                params.append('faceid', this.faceid);

                this.fullscreenLoading = true
                axios.post('/f_wscl/hik', params)
                    .then(function (res) {
                        if (res.data.code === "1") {
                            layer.msg('<span style="font-size:20px; line-height: 30px; display: inline-block; vertical-align: middle;">' + res.data.msg + '</span>', {time: 4000, skin: 'fail'});
                        } else if (res.data.code === "0") {
                            layer.msg('<span style="font-size:24px; line-height: 30px">海康平台同步完毕!</span>', {time: 2000, skin: 'succeed'})
                        }
                    })
                    .catch(function (error) {
                        layer.msg('<span style="font-size:20px; line-height: 60px">网络异常错误!</span>', {time: 1500, skin: 'fail'});
                    }).finally(function () {
                    self.fullscreenLoading = false
                });
            },

            fInit(o) {
                let zz = o.tableTree
                let bm = o.tableTree
                let all = []
                let suboption = {}
                let citys = [];
                for (let i = 0; i < zz.length; i++) {
                    citys = []
                    let zzTmp = zz[i]
                    if (zzTmp.VALUE03 === '1') {
                        let zzbh = zzTmp.VALUE04
                        for (let j = 0; j < bm.length; j++) {
                            let bmTmp = bm[j]
                            if (bmTmp.VALUE05 === zzbh) {
                                let city = {};
                                city.bmvalue = bmTmp.VALUE04
                                city.bmlabel = bmTmp.VALUE02
                                citys.push(city)
                            }
                        }
                        suboption = {}
                        suboption.label = zzTmp.VALUE01
                        suboption.options = citys
                        all.push(suboption)
                    }
                }
                this.options = all;

                this.tableRylb = o.tableRylb
                this.zzmc = o.zzmc
                let empobj = o.tableEmp
                this.ryzh = empobj.VALUE10.toString()
                this.ryxm = empobj.VALUE01.toString()
                this.gh = empobj.VALUE02.toString()
                this.bmvalue = empobj.VALUE11.toString()
                this.rylb = empobj.VALUE12.toString()
                this.xflb = empobj.VALUE13.toString()
                this.sfzh = empobj.VALUE07.toString()
                this.dhhm = empobj.VALUE08.toString()
                this.hysex = empobj.VALUE14.toString()      //--性别
                this.ismen = empobj.VALUE15.toString()      //--是否上传门禁系统
                this.personid = empobj.VALUE21.toString()
                this.bmUUID = empobj.VALUE22.toString()
                this.rykh = empobj.VALUE19.toString()
                this.faceid = empobj.VALUE23.toString()

                let self = this
                let params = new URLSearchParams();
                params.append('CMD', "BL");
                params.append('VALUE01', this.ryzh);
                this.fullscreenLoading = true
                axios.post('/f_wscl/com2', params)
                    .then(function (res) {
                        //--db1左边表结构的树  db2人员分类
                        let {db1, db2} = res.data
                        self.tableXflb = db2
                        self.base64 = db1[0].VALUE01.toString()     //--人脸信息
                        if (self.base64.indexOf("base64,") === -1) {
                            self.base64 = "data:image/jpg;base64," + self.base64;
                        }
                    })
                    .catch(function (error) {
                    }).finally(function () {
                    self.fullscreenLoading = false
                });
            },

            fExit() {
                let index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        },

        mounted() {
            window.fInit = this.fInit
        },

        created() {
        }
    })

    $(document).ajaxComplete(function (event, xhr, settings) {
        //从http头信息取出 在filter定义的sessionstatus，判断是否是 timeout
        if (xhr.getResponseHeader("sessionstatus") === "timeout") {
            //从http头信息取出登录的url ＝ loginPath
            if (xhr.getResponseHeader("loginPath")) {
                window.location.replace(xhr.getResponseHeader("loginPath"));
            }
        }
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
